<template>
  <div v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(255, 255, 255, 0.8)">
    <div style="margin-bottom: 10px;">
      <el-tag>工作空间</el-tag>
      <el-select style="margin-left: 10px;"  v-model="workspaceName"  size="mini" @clear="clearMethod" @change="workSpaceNamechange" clearable filterable>
        <el-option v-for="item in workSpaceList"
                   :key="item"
                   :value="item"
                   :label="item">
        </el-option>
      </el-select>

      <el-tag style="margin-left: 5rem;">项目名称</el-tag>
      <el-select  style="margin-left: 10px;" v-model="projectName"  size="mini" @clear="clearMethod" @change="projectNamechange" clearable filterable>
        <el-option v-for="item in projectList"
                   :key="item"
                   :value="item"
                   :label="item">
        </el-option>
      </el-select>

      <el-tag style="margin-left: 5rem;">用户</el-tag>
      <el-select  style="margin-left: 10px;" v-model="userName"  size="mini" @clear="clearMethod" @change="userNamechange" clearable filterable>
        <el-option v-for="item in userList"
                   :key="item"
                   :value="item"
                   :label="item">
        </el-option>
      </el-select>

      <el-button style="margin-left: 10px;" size="mini" type="primary" @click="reset">重置</el-button>
    </div>
    <hr>
    <div>
      <el-tag>数据统计</el-tag>
    </div>
    <div class="wrapper">
      <div class="item">
        <div><span>创建场景用例</span>: <span>{{operateData.totalCreateScenario}}</span></div>
      </div>
      <div class="item">
        <div><span>更新场景用例</span>: <span>{{operateData.totalUpdateScenario}}</span></div>
      </div>
      <div class="item">
        <div><span>创建接口用例</span>: <span>{{operateData.totalCreateCase}}</span></div>
      </div>
      <div class="item">
        <div><span>更新接口用例</span>: <span>{{operateData.totalUpdateCase}}</span></div>
      </div>
    </div>

    <div> <el-tag v-if="!userName">数据对比</el-tag></div>
    <div v-if="!userName" class="echart" id="mychart1" :style="{ width: '98%', height: '300px' }"></div>
    <div v-if="!userName">
      <el-table
        border
        stripe
        row-id="resourceID"
        row-key="resourceID"
        ref="searchTable"
        :data="caseData"
        highlight-current-row
        class="table temp-table"
        style="width: 100%"
        :max-height="450"
        :header-cell-style="{background:'#F5F5F5'}"
        highlight-hover-row
        @sort-change="schange"
      >
       <!-- <el-table-column label="序号" width="50px" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>-->

        <el-table-column label="工作空间" v-if="!workspaceName&& !projectName" width="150px" align="center" prop="name"></el-table-column>
        <el-table-column label="项目名称" v-if="!!workspaceName&&!projectName" width="150px" align="center" prop="name"></el-table-column>
        <el-table-column label="用户名称" v-if="!!projectName" width="150px" align="center" prop="name"></el-table-column>

        <el-table-column label="创建场景用例个数"  align="center" prop="createScenario"></el-table-column>

        <el-table-column label="创建接口用例个数"  align="center" prop="createCase"></el-table-column>

        <el-table-column label="更新场景用例个数"   align="center" prop="updateScenario">

        </el-table-column>
        <el-table-column label="更新接口用例个数"  align="center" prop="updateCase"></el-table-column>

        <!--   <el-table-column label="详情"  width="200px" align="center">
             <template slot-scope="scope">
               <span style="color: #00b4ff;cursor:pointer;" @click="lookDetail(scope.row)">查看详情</span>
             </template>
           </el-table-column>-->


      </el-table>
    </div>
    <div style="margin-bottom: 10px;" v-if="!userName">
      <el-pagination
        v-show="pagination.total>0"
        :current-page.sync="pagination.currentPage"
        :page-size.sync="pagination.pageSize"
        :layout="layout"
        :page-sizes="pagination.pageOptions"
        :total="pagination.total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div><el-tag>月份数据统计</el-tag></div>
    <div class="echart" id="mychart2" :style="{ width: '98%', height: '300px'  }"></div>

<!--    <div><el-tag>时间统计</el-tag></div>-->
    <div style="margin-top: 10px;">
      <el-table
        border
        stripe
        row-id="resourceID"
        row-key="resourceID"
        ref="searchTable"
        :data="monthData"
        highlight-current-row
        class="table temp-table"
        style="width: 100%"
        :max-height="450"
        :header-cell-style="{background:'#F5F5F5'}"
        highlight-hover-row
        @sort-change="schange"
      >
        <el-table-column label="序号" width="50px" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="月份" width="150px" align="center" prop="month"></el-table-column>

        <el-table-column label="创建场景用例个数"  align="center" prop="createScenario"></el-table-column>

        <el-table-column label="创建接口用例个数"  align="center" prop="createCase"></el-table-column>

        <el-table-column label="更新场景用例个数"   align="center" prop="updateScenario">

        </el-table-column>
        <el-table-column label="更新接口用例个数"  align="center" prop="updateCase"></el-table-column>

     <!--   <el-table-column label="详情"  width="200px" align="center">
          <template slot-scope="scope">
            <span style="color: #00b4ff;cursor:pointer;" @click="lookDetail(scope.row)">查看详情</span>
          </template>
        </el-table-column>-->


      </el-table>

    </div>
    <div style="height: 20px"></div>

  </div>
</template>

<script>
  import * as echarts from "echarts";
  // const base = "http://192.168.74.103:80"
  import domain from '../../../../domain.js'
  const base = domain.target
  export default {
    name: "caseRecord",
    async created () {
      console.log("created")

    },
    async mounted() {
      console.log("mouted")
      await this.init();
      // const myChart = echarts.init(document.getElementById("mychart1"));//
      // const myChart2 = echarts.init(document.getElementById("mychart2"));//
      //
      // myChart.setOption(this.option1);// 渲染页面
      // myChart2.setOption(this.option2);// 渲染页面
      // await this.getBizList();
      // await this.getchartsData();
      // await this.getList();
    },

    data () {
      return {
        workspaceName:"",
        projectName:"",
        userName:"",
        loading:false,
        biz:"",
        systemCount:0,
        caseTotalCount:0,
        averagePassRate:0,
        tableData:[],
        bizList:[],
        activeName:"1",
        option1:{
          tooltip:{},
          /*title:{
            text: "用例总数变化",
            textStyle:{
              fontSize:"14",
              fontWeight:"bolder"
            },
          },*/
          grid:{
            left:'5%',
            width:"90%",
          },
          xAxis: {
            type: 'category',
            data: [], // 后端获取
            // max:7,
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              rotate: -10
            }
          },
          /* legend: {
             data: ['总数',{name:"未关闭",textStyle:{color:"red"}}]//'line2'
           },*/
          legend:{
            data: ["创建接口用例个数","创建场景用例个数","更新接口用例个数","更新场景用例个数"],
            selected:{
              // '所有系统':true,
              // '百胜云':false,
              // 'CMDB':false,
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              // formatter: '{value} %'
            },
          },
          series: [
            {
              name: '创建接口用例个数',
              data: [], // 后端获取
              type: 'bar',
              color: "#409EFF",
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              barWidth :'20px',
              // lineStyle:{
              //   width: 2
              // },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            {
              name: '创建场景用例个数',
              data: [], // 后端获取
              type: 'bar',
              color: "pink",
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              barWidth :'20px',

              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            {
              name: '更新接口用例个数',
              data: [], // 后端获取
              type: 'bar',
              color: "silver",
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              barWidth :'20px',

              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            {
              name: '更新场景用例个数',
              data: [], // 后端获取
              type: 'bar',
              color: "lightgreen",
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              barWidth :'20px',
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            /* {
               name: '未关闭',
               data: [], // 后端获取
               type: 'bar',
               color: "lightblue",
               //smooth: true,
               barWidth :'55px',
               label:{
                 show:true,
                 // rotate:60,
                 position:'top',
                 color:"black"
               },
               // lineStyle:{
               //   width: 2,
               //   color:"red"
               // },
               itemStyle: {
                 color:"red"
               },
             },*/
          ],
          /*   dataZoom: [
               {
                 show: true,
                 height: 5,
                 xAxisIndex: [0],
                 bottom: 20,
                 showDetail: false,
                 showDataShadow: false,
                 borderColor: "transparent",
                 textStyle: {
                   fontSize: 0
                 },
                 // startValue:1,
                 endValue: 10,//从0开始的相当于5个
                 backgroundColor: "rgba(0,0,0,0)",
                 borderWidth: 0,
                 handleSize: "0%",
                 handleStyle: {
                   color: "#d3dee5"
                 }
               }
             ]*/

        },
        option2:{
          tooltip: {
            trigger: 'axis'
          },
          title:{
            text: "",
            textStyle:{
              fontSize:"14",
              fontWeight:"bolder"
            },
          },
          grid:{
            left:'5%',
            width:"90%",
          },
          legend:{
            data: ["创建接口用例个数","创建场景用例个数","更新接口用例个数","更新场景用例个数"],
            selected:{
              // '所有系统':true,
              // '百胜云':false,
              // 'CMDB':false,
            }
          },
          xAxis: {
            type: 'category',
            data: [], // 后端获取
            // max:7,
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              rotate: -10
            }
          },
          /* legend: {
             data: ['总数',{name:"未关闭",textStyle:{color:"red"}}]//'line2'
           },*/
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              // formatter: '{value} %'
            },
          },
          series: [
            {
              name: '创建接口用例个数',
              data: [], // 后端获取
              type: 'line',
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              color:"#409eff",
              // areaStyle: {
              //   normal: {
              //     color: '#409eff' //改变区域颜色
              //   }
              // },
              emphasis: {
                focus: 'series'
              },
              lineStyle:{
                width: 2
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            {
              name: '创建场景用例个数',
              data: [], // 后端获取
              type: 'line',
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              lineStyle:{
                width: 2
              },
              color: '#a7535a',
             /* areaStyle: {
                normal: {
                  color: '#a7535a' //改变区域颜色
                }
              },*/
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            {
              name: '更新接口用例个数',
              data: [], // 后端获取
              type: 'line',
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              lineStyle:{
                width: 2
              },

              color: '#1ba784',
             /* areaStyle: {
                normal: {
                  color: '#1ba784' //改变区域颜色
                }
              },*/
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            {
              name: '更新场景用例个数',
              data: [], // 后端获取
              type: 'line',
              //smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              lineStyle:{
                width: 2
              },

              color: 'pink',
            /*  areaStyle: {
                normal: {
                  color: '#1ba784' //改变区域颜色
                }
              },*/
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
          ],


        },
        layout:'total, sizes, prev, pager, next, jumper',
        pagination: {
          total: 0, // 总数
          pageSize: 8, // 页面多少条数据
          currentPage: 1, // 当前在哪页
          pageOptions: [5, 8,10]// 页面选项
        },
        order:"asc",

        userList:[],
        projectList:[],
        workSpaceList:[],
        operateData:{},
        monthData:[],
        caseData:[]
      }
    },
    methods: {
      async init(){
        this.loading = true
        // http://localhost:80/operate/get/users 获取用户列表
        // http://localhost:80/operate/get/projects 获取项目列表
        // http://localhost:80/operate/get/workspaces 获取工作空间列表
        // http://192.168.74.103:80/join/get/month/business/data
        let getUserUrl = `${base}/operate/get/users`
        let getProjectUrl = `${base}/operate/get/projects`
        let getWorkspacesUrl = `${base}/operate/get/workspaces`
        let operateDataUrl = `${base}/operate/get/all/operate/data`
        let monthDataUrl = `${base}/operate/get/all/operate/data/month`
        // let barUrl = "http://192.168.74.103:80/operate/get/workspaces/operate/data"
        await this.$get(getUserUrl, {}).then(res => {
          if (res && res.data.code ==20000){
              this.userList = res.data.obj|| []
          }
        })
        await this.$get(getProjectUrl, {}).then(res => {
          if (res&& res.data.code ==20000){
              this.projectList= res.data.obj || []
          }
        })
        await this.$get(getWorkspacesUrl, {}).then(res => {
          if (res&& res.data.code ==20000){

            this.workSpaceList= res.data.obj || []
          }
        })

        // await this.$get(operateDataUrl, {}).then(res => {
        //   if (res&& res.data.code ==20000){
        //
        //   }
        // })


        // 月份折线图
        await this.$get(monthDataUrl, {}).then(res => {
          if (res&& res.data.code ==20000){
            this.operateData= {
              totalCreateCase: res.data.obj.totalCreateCase,
              totalCreateScenario: res.data.obj.totalCreateScenario,
              totalUpdateCase: res.data.obj.totalUpdateCase,
              totalUpdateScenario: res.data.obj.totalUpdateScenario
            }
             this.monthData = []
             this.monthData = res.data.obj.monthList|| []
             let monthx = []
             let createCase = []
             let createScenario = []
             let updateCase = []
             let updateScenario = []
             this.monthData.forEach((item)=>{
              monthx.push(item.month)
              createCase.push(item.createCase)
              createScenario.push(item.createScenario)
              updateCase.push(item.updateCase)
              updateScenario.push(item.updateScenario)
            })

            this.option2.xAxis.data = monthx
            this.option2.series[0].data = createCase
            this.option2.series[1].data = createScenario
            this.option2.series[2].data = updateCase
            this.option2.series[3].data = updateScenario
            const mychart = echarts.init(document.getElementById("mychart2"));//
            mychart.setOption(this.option2);
          }
        })
        // 柱状图
        // let params = {
        //   pageSize: this.pagination.pageSize,
        //   pageNum: this.pagination.currentPage
        // }
        // await this.$get(barUrl, {params}).then(res => {
        //   if (res&& res.data.code ==20000){
        //     this.pagination.total = res.data.obj.total
        //     let data = res.data.obj.list|| []
        //   }
        // })
        await this.getBarData()

        this.loading = false
      },
      async reset(){
        this.workspaceName = ""
        this.projectName = ""
        this.userName = ""
        this.pagination.currentPage =1
        await this.init()
      },
      async getBarData(){
        this.loading = true
        let url1 = `${base}/operate/get/workspaces/operate/data`
        let url2 = `${base}/operate/get/projects/operate/data`
        // let barUrl = `${base}/operate/get/workspaces/operate/data`
        let barUrl = `${base}/operate/get/all/operate/data`
        let url = ""
        let p = {

        }
        if (!this.workspaceName &&!this.projectName&&!this.userName ){
          url = barUrl
        }

        if (!!this.workspaceName &&!this.projectName&&!this.userName ){
          url = url1
          p = {
            workspaceName:this.workspaceName,
            projectName:this.projectName
          }
        }

        if (!!this.projectName&&!this.userName ){
          url = url2
          p = {
            workspaceName:this.workspaceName,
            projectName:this.projectName,
          }
        }

        // 柱状图
        let params = {
          pageSize: this.pagination.pageSize,
          pageNum: this.pagination.currentPage,
          ...p
        }

        await this.$get(barUrl, {params}).then(res => {
          if (res&& res.data.code ==20000){
            this.pagination.total = res.data.obj.total

            this.caseData = res.data.obj.list|| []
            let data = res.data.obj.list|| []
            let x = []
            let createCase = []
            let createScenario = []
            let updateCase = []
            let updateScenario = []
            data.forEach((item)=>{
              x.push(item.name)
              createCase.push(item.createCase)
              createScenario.push(item.createScenario)
              updateCase.push(item.updateCase)
              updateScenario.push(item.updateScenario)
            })

            this.option1.xAxis.data = x
            this.option1.series[0].data = createCase
            this.option1.series[1].data = createScenario
            this.option1.series[2].data = updateCase
            this.option1.series[3].data = updateScenario

            const mychart = echarts.init(document.getElementById("mychart1"));//
            mychart.setOption(this.option1);
            this.loading = false
          }
        })
      },
      lookDetail(data){
        console.log(data)
        let newUrl = data.detailLink
        let a = document.createElement('a');
        a.setAttribute('href', newUrl);
        a.setAttribute('target', '_self');
        // a.setAttribute('download', '结论.pdf'); // 自定义文件名（有效）
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

      },
      async workSpaceNamechange(val){
        // 只要下拉框值为空的时候 就init 查询一下

        this.pagination.currentPage =1
        // this.getchartsData()
        // this.getList()
        // console.log(this.userName)
        this.loading = true
        console.log("this.workspaceName",this.workspaceName)
        // console.log(this.projectName)
        this.projectName = ""
        this.userName = ""
        this.projectList = []
        this.userList = []
        // /operate/get/projects/by/workspace?workspaceName=KFC
        let url = `${base}/operate/get/projects/by/workspace`
        let url2 = `${base}/operate/get/users/by/workspace`
        let params = {
          workspaceName:this.workspaceName
        }
        // let params2 = {
        //   workspaceName:this.workspaceName
        // }
        await this.$get(url, {params}).then(res => {
          if (res&& res.data.code ==20000){
            this.projectList= res.data.obj || []
          }
        })
        await this.$get(url2, {params}).then(res => {
          if (res&& res.data.code ==20000){
            this.userList= res.data.obj || []
          }
        })

        if (!!this.workspaceName && !this.projectName && !this.userName){
          // operate/get/workspace/operate/data/month?workspaceName=KFC
          // /operate/get/projects/operate/data?pageNum=1&pageSize=10 获取所有项目用户操作信息

          // /operate/get/project/operate/data/month?projectName=KFC
          let url = `${base}/operate/get/workspace/operate/data/month`
          let params = {
            workspaceName:this.workspaceName,
            projectName:this.projectName,
            userName:this.userName
          }
          await this.$get(url, {params}).then(res => {
            if (res&& res.data.code ==20000){
              // this.userList= res.data.obj || []
              this.operateData={
                totalCreateCase: res.data.obj.totalCreateCase,
                totalCreateScenario: res.data.obj.totalCreateScenario,
                totalUpdateCase: res.data.obj.totalUpdateCase,
                totalUpdateScenario: res.data.obj.totalUpdateScenario
              }

              this.monthData = []
              this.monthData = res.data.obj.monthList|| []
              let monthx = []
              let createCase = []
              let createScenario = []
              let updateCase = []
              let updateScenario = []
              this.monthData.forEach((item)=>{
                monthx.push(item.month)
                createCase.push(item.createCase)
                createScenario.push(item.createScenario)
                updateCase.push(item.updateCase)
                updateScenario.push(item.updateScenario)
              })

              this.option2.xAxis.data = monthx
              this.option2.series[0].data = createCase
              this.option2.series[1].data = createScenario
              this.option2.series[2].data = updateCase
              this.option2.series[3].data = updateScenario
              const mychart = echarts.init(document.getElementById("mychart2"));//
              mychart.setOption(this.option2);
            }
          })
          // /operate/get/users/operate/data?pageNum=1&pageSize=10 获取所有用户操作信息
          let url2 = `${base}/operate/get/projects/operate/data`
          let params2 = {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.currentPage,
            workspaceName:this.workspaceName,
            projectName:this.projectName,
            userName:this.userName
          }
          await this.$get(url2, {params:params2}).then(res => {
            if (res&& res.data.code ==20000){
              // this.userList= res.data.obj || []
              this.pagination.total = res.data.obj.total

              this.caseData = res.data.obj.list|| []
              let data = res.data.obj.list|| []
              let x = []
              let createCase = []
              let createScenario = []
              let updateCase = []
              let updateScenario = []
              data.forEach((item)=>{
                x.push(item.name)
                createCase.push(item.createCase)
                createScenario.push(item.createScenario)
                updateCase.push(item.updateCase)
                updateScenario.push(item.updateScenario)
              })

              this.option1.xAxis.data = x
              this.option1.series[0].data = createCase
              this.option1.series[1].data = createScenario
              this.option1.series[2].data = updateCase
              this.option1.series[3].data = updateScenario

              const mychart = echarts.init(document.getElementById("mychart1"));//
              mychart.setOption(this.option1);
            }
          })
        }

        this.loading = false
      },
      async projectNamechange(val){
        // this.getchartsData()
        // this.getList()
        this.pagination.currentPage =1
        this.loading = true
        this.userName = ""
        this.userList = []
        let url = `${base}/operate/get/users/by/project`
        let params = {
          projectName:this.projectName
        }
        await this.$get(url, {params}).then(res => {
          if (res&& res.data.code ==20000){
            this.userList= res.data.obj || []
          }
        })

        if (!!this.projectName && !this.userName){
          //
          let url =`${base}/operate/get/project/operate/data/month`
          let params = {
            workspaceName:this.workspaceName,
            projectName:this.projectName,
            userName:this.userName
          }
          await this.$get(url, {params}).then(res => {
            if (res&& res.data.code ==20000){
              // this.userList= res.data.obj || []
              this.operateData={
                totalCreateCase: res.data.obj.totalCreateCase,
                totalCreateScenario: res.data.obj.totalCreateScenario,
                totalUpdateCase: res.data.obj.totalUpdateCase,
                totalUpdateScenario: res.data.obj.totalUpdateScenario
              }

              this.monthData = []
              this.monthData = res.data.obj.monthList|| []
              let monthx = []
              let createCase = []
              let createScenario = []
              let updateCase = []
              let updateScenario = []
              this.monthData.forEach((item)=>{
                monthx.push(item.month)
                createCase.push(item.createCase)
                createScenario.push(item.createScenario)
                updateCase.push(item.updateCase)
                updateScenario.push(item.updateScenario)
              })

              this.option2.xAxis.data = monthx
              this.option2.series[0].data = createCase
              this.option2.series[1].data = createScenario
              this.option2.series[2].data = updateCase
              this.option2.series[3].data = updateScenario
              const mychart = echarts.init(document.getElementById("mychart2"));//
              mychart.setOption(this.option2);
            }
          })
          // /operate/get/users/operate/data?pageNum=1&pageSize=10 获取所有用户操作信息
          let url2 = `${base}/operate/get/projects/operate/data`
          let params2 = {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.currentPage,
            workspaceName:this.workspaceName,
            projectName:this.projectName,
            userName:this.userName
          }
          await this.$get(url2, {params:params2}).then(res => {
            if (res&& res.data.code ==20000){
              // this.userList= res.data.obj || []
              this.pagination.total = res.data.obj.total

              this.caseData = res.data.obj.list|| []
              let data = res.data.obj.list|| []
              let x = []
              let createCase = []
              let createScenario = []
              let updateCase = []
              let updateScenario = []
              data.forEach((item)=>{
                x.push(item.name)
                createCase.push(item.createCase)
                createScenario.push(item.createScenario)
                updateCase.push(item.updateCase)
                updateScenario.push(item.updateScenario)
              })

              this.option1.xAxis.data = x
              this.option1.series[0].data = createCase
              this.option1.series[1].data = createScenario
              this.option1.series[2].data = updateCase
              this.option1.series[3].data = updateScenario

              const mychart = echarts.init(document.getElementById("mychart1"));//
              mychart.setOption(this.option1);
            }
          })
          this.loading =false
        }
      },
      async userNamechange(val){
        // this.getchartsData()
        // this.getList()
        this.pagination.currentPage =1
        this.loading = true
        if (!!this.userName){
          let url1 = `${base}/operate/get/user/operate/data/month`
          let params = {
            workspaceName:this.workspaceName,
            projectName:this.projectName,
            userName:this.userName
          }
          // http://localhost:80/operate/get/user/operate/data?userName=丁孟丽    获取单个用户操作信息
          await this.$get(url1, {params}).then(res => {
            if (res&& res.data.code ==20000){
              // this.userList= res.data.obj || []
              this.operateData={
                totalCreateCase: res.data.obj.totalCreateCase,
                totalCreateScenario: res.data.obj.totalCreateScenario,
                totalUpdateCase: res.data.obj.totalUpdateCase,
                totalUpdateScenario: res.data.obj.totalUpdateScenario
              }

              this.monthData = []
              this.monthData = res.data.obj.monthList|| []
              let monthx = []
              let createCase = []
              let createScenario = []
              let updateCase = []
              let updateScenario = []
              this.monthData.forEach((item)=>{
                monthx.push(item.month)
                createCase.push(item.createCase)
                createScenario.push(item.createScenario)
                updateCase.push(item.updateCase)
                updateScenario.push(item.updateScenario)
              })

              this.option2.xAxis.data = monthx
              this.option2.series[0].data = createCase
              this.option2.series[1].data = createScenario
              this.option2.series[2].data = updateCase
              this.option2.series[3].data = updateScenario
              const mychart = echarts.init(document.getElementById("mychart2"));//
              mychart.setOption(this.option2);
              this.loading = false
            }
          })
        }
      },
      async clearMethod(){
        await this.reset()
      },


      // async getList(){
      //   // pageNum=1&pageSize=10&myOrder=asc&withBusinessName=EC
      //   let url ="http://192.168.74.103:80/join/get/month/business/data"
      //   let params = {
      //     pageSize: this.pagination.pageSize,
      //     pageNum: this.pagination.currentPage,
      //     myOrder:this.order,
      //     withBusinessName:this.biz
      //   }
      //   this.$get(url, {params}).then(res => {
      //     if (res&& res.data.code ==20000){
      //       this.pagination.total = res.data.obj.total*1
      //       this.tableData = res.data.obj.list || [];
      //     }
      //   })
      // },
      handleSizeChange(val) {
        console.log(val)
        this.pagination.currentPage = 1
        this.pagination.pageSize = val
        console.log(this.currentPage)
        this.getBarData()

      },

      handleCurrentChange(val) {
        console.log(val)
        this.pagination.currentPage = val
        this.getBarData()

      },
      schange({column, prop, order}){
        console.log(column, prop, order)
        if (order =='ascending'){
          this.order="asc"
        }else if (order =='descending'){
          this.order="desc"
        }else{
          this.order="desc"
        }
        this.getList()
      }
    },

    computed: {

    },
    watch: {

    },
  }
</script>

<style scoped lang="scss">
  .wrapper{
    width: 99%;
    margin: 0 auto;
    /*border: 1px solid #e8e8e8;*/
    /*border-radius: 5px;*/
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item{
      width: 20%;
      height: 140px;
      border: 1px solid #e8e8e8;
      border-radius: 5px;
      /*box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);*/
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
      /*margin-left: 10%;*/
      /*background-color: honeydew;*/
      /*background-color: lightcyan;*/
      background-color: rgba(64, 158, 255, .6);
      box-shadow: 0 0 5px 0 ;

      /*background: inherit;*/

      backdrop-filter: blur(10px);

    }
  }
  hr{
    border-bottom: 1px solid lightgray;

  }
  .el-tag{
    font-size: 17px;
  }
</style>
